<style>
    .codeLogin {
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: url(../../assets/qudaoImg/HomeBg.jpg) top center no-repeat;
        background-size: 100% 100%;
    }
    
    .codeLogin .middle-wrapper {
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-60%);
        height: 350px;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .codeLogin .title-wrapper {
        margin-top: 50px;
        margin-bottom: 30px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
    }
    
    .codeLogin .system_top {
        height: 400px;
        overflow: hidden;
    }
    
    .codeLogin .system_top .text {
        width: 886px;
        height: 150px;
        background: url(../../assets/qudaoImg/keji.png) 0 0 no-repeat;
        margin: 60px auto 0;
    }
    
    .codeLogin .system_top .text h3 {
        height: 50px;
        line-height: 50px;
        font-size: 50px;
        color: #F5F5F5;
        font-weight: normal;
        margin: 0 0 24px 137px;
    }
    
    .codeLogin .system_top .text p {
        height: 43px;
        line-height: 43px;
        font-size: 40px;
        color: #F5F5F5;
        margin: 0 0 38px 137px;
    }
    
    .codecodeLogin .codeLogin-form .el-form,
    .codeLogin-form {
        width: 886px;
        height: 150px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    
    .codeLogin .codeLogin-form .el-form-item {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .codeLogin .codeLogin-form .el-form-item:nth-child(2) {
        left: 435px;
    }
    
    .codeLogin .codeLogin-form .el-form-item:nth-child(3) {
        left: 820px;
    }
    
    .codeLogin .codeLogin-form .el-form-item,
    .codeLogin .codeLogin-form .el-form-item .el-inputlist,
    .codeLogin .codeLogin-form .el-form-item__content {
        width: 275px;
        height: 60px !important;
        line-height: 60px;
        display: inline-block;
    }
    
    .codeLogin .codeLogin-form .el-form-item .el-inputlist input {
        width: 275px;
        height: 60px !important;
        line-height: 60px;
        display: inline-block;
        font-size: 18px;
    }
    
    .codeLogin-form .el-form-item input[type="text"],
    .codeLogin-form .el-form-item input[type="password"] {
        width: 360px !important;
        height: 60px;
        line-height: 60px;
        padding-left: 85px !important;
    }
    
    .codeLogin .el-form-item .el-button {
        padding: 0;
        width: 60px;
        height: 60px;
        display: inline-block;
        border: none;
        cursor: pointer;
        background: url(../../assets/qudaoImg/Go.png) top center no-repeat;
    }
    
    .codeLogin .el-form-item:nth-child(1) input {
        background: url(../../assets/qudaoImg/icon01.png) #fff 30px center no-repeat;
    }
    
    .codeLogin .el-form-item:nth-child(2) input {
        background: url(../../assets/qudaoImg/icon02.png) #fff 30px center no-repeat;
    }
    
    .codeLogin-form .el-form-item__error {
        font-size: 14px;
        margin-top: 5px;
    }
    
    .pr {
        position: relative;
    }
    
    .code-btn {
        width: 100px;
        height: 34px;
        position: absolute;
        top: 3px;
        right: 5px;
        z-index: 222;
        color: #F5A623;
        font-size: 14px;
        border: none;
        border-left: 1px solid #bababa;
        padding-left: 16px;
        background-color: #fff;
    }
</style>
<template>
    <div class="codeLogin">
        <div class="middle-wrapper">
            <div class="system_top w1200">
                <div class="text">
                    <h3>新华三技术大讲堂</h3>
                    <p>Enterprise Data Service Solutions</p>
                </div>
                <div class="login-form">
                    <el-form-item prop="username">
                        <el-input placeholder="请输入用户名称" class="el-inputlist" style="height: 60px;">
                        </el-input>
                    </el-form-item>
                    <el-form ref="loginForm" :model="form">
                        <el-form-item label="" prop="code" class="pr">
                            <el-input prop="code" v-model="loginForm.code" placeholder="验证码"></el-input>
                            <button @click="getCode(regForm)" class="code-btn" :disabled="!show">
                                <span v-show="show">发送验证码</span>
                                <span v-show="!show" class="count">{{count}} s</span>
                            </button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    const TIME_COUNT = 60 // 倒计时的时间
    import axios from 'axios';
    import crypto from 'crypto';
    export default {
        data() {
            return {
                passwordType: 'password',
                checkCode: '',
                form: {
                    username: 'admin',
                    password: '',
                    verificationCode: ''
                },
                show: true, // 初始启用按钮
                count: '', // 初始化次数
                timer: null,
                loginForm: {
                    mobile: '',
                    code: ''
                },
                show: true,
                count: '',
                timer: null
            };
        },
        methods: {
            login() {
                // axios({
                //     method: 'POST',
                //     url: this.$root.jifuUrl + "/mns/user/login",
                //     headers: {
                //         'Content-type': 'application/json; charset=utf-8'
                //     },
                //     data: JSON.stringify({
                //         nickname: this.form.username,
                //         password: this.form.password
                //     })
                // }).then((res) => {
                //     this.$root.userInfoMsg = res.data.data;
                //     this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
                //     this.$router.push({
                //         path: 'home'
                //     });
                // }).catch(error => {
                //     alert('用户名或密码错误！');
                // })
            },
            getCode(formData) {
                // 验证码倒计时
                if (!this.timer) {
                    this.count = TIME_COUNT
                    this.show = false
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--
                        } else {
                            this.show = true
                            clearInterval(this.timer)
                            this.timer = null
                        }
                    }, 1000)
                }
            },
        }
    };
</script>